<template>
  <div class="zi-main">
    <h1>Vue Sign Canvas 电子签名板</h1>
    <div class="pt-20">
      <sign-canvas class="sign-canvas" ref="signcanvasref" :options="options" v-model="value" />
      <img v-if="value" class="view-image" :src="value" width="350" height="175" />
      <div>
        <el-button @click="canvasClear">清空</el-button>
        <el-button @click="saveAsImg">保存</el-button>
        <el-button @click="downloadSignImg">下载</el-button>
      </div>
    </div>
  </div>
</template>

<script>

import { defineComponent, reactive, ref } from 'vue'
import SignCanvas from './components/SignCanvas'

const appName = require('../../../package.json').name

export default defineComponent({

  name: `${appName}.home`,

  components: {
    SignCanvas
  },

  setup () {
    const value = ref('')
    const signcanvasref = ref(null)
    const options = reactive({
      isDpr: false, // 是否使用dpr兼容高倍屏 [Boolean] 可选
      lastWriteSpeed: 1, // 书写速度 [Number] 可选
      lastWriteWidth: 2, // 下笔的宽度 [Number] 可选
      lineCap: 'round', // 线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square]正方形线帽
      lineJoin: 'bevel', // 线条交汇时边角的类型  [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
      canvasWidth: 700, // canvas宽高 [Number] 可选
      canvasHeight: 350, // 高度  [Number] 可选
      isShowBorder: true, // 是否显示边框 [可选]
      bgColor: '#fcc', // 背景色 [String] 可选
      borderWidth: 1, // 网格线宽度  [Number] 可选
      borderColor: '#ff787f', // 网格颜色  [String] 可选
      writeWidth: 5, // 基础轨迹宽度  [Number] 可选
      maxWriteWidth: 30, // 写字模式最大线宽  [Number] 可选
      minWriteWidth: 5, // 写字模式最小线宽  [Number] 可选
      writeColor: '#101010', // 轨迹颜色  [String] 可选
      isSign: true, // 签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
      imgType: 'png' // 下载的图片格式  [String] 可选为 jpeg  canvas本是透明背景的
    })

    // 清除画板
    const canvasClear = () => {
      signcanvasref.value.canvasClear()
    }

    // 保存图片
    const saveAsImg = () => {
      const img = signcanvasref.value.saveAsImg()
      alert(`image 的base64：${img}`)
    }

    // 下载图片
    const downloadSignImg = () => {
      signcanvasref.value.downloadSignImg()
    }

    return {
      value,
      options,
      signcanvasref,
      canvasClear,
      saveAsImg,
      downloadSignImg
    }
  }
})

</script>

<style scoped lang="scss">
.zi-main {
  padding-top: 20px;
  height: 100%;
  text-align: center;
  > h1 {
    font-size: 24px;
  }
}

.sign-canvas {
  display: block;
  margin: 20px auto;
}
.view-image {
  display: block;
  margin: 20px auto;
}
</style>
